<template>
	<view>
		<uni-popup ref="popup" type="bottom" :isMaskClick="false">
			<view class="comment-masker-container">
				<view class="masker-header">
					<text @click="cancelComment">取消</text>
					<text @click="sendComment">发布</text>
				</view>

				<view class="masker-content">
					<textarea v-model.trim="commentVal" placeholder="请输入评论内容" maxlength="200"></textarea>
					<view class="masker-content-count">
						{{commentVal.length}}/200
					</view>
				</view>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	export default {
		name: "CommentMasker",
		props: {
			showPopup: Boolean
		},
		watch: {
			showPopup(newVal, oldVal) {
				newVal ? this.$refs.popup.open() : this.$refs.popup.close()
			}
		},
		data() {
			return {
				commentVal: "",
			};
		},
		methods: {
			//取消 关闭弹出
			cancelComment() {
				this.$emit("cancle", false)
			},
			//确认发布
			sendComment() {

				if (!this.commentVal) {
					//输入内容为空
					uni.showToast({
						title: "请输入评论内容",
						icon: "none"
					})
					return
				}
				this.$emit("sendComment", this.commentVal)
				this.commentVal = ""
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment-masker-container {
		background-color: #fff;

		.masker-header {
			@include flex();

			border-bottom: 1px solid #eee;
			font-size: 28rpx;
			color: #555;

			text {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 30rpx;
			}
		}

		.masker-content {
			padding: 30rpx;
			width: 100%;
			box-sizing: border-box;

			textarea {
				height: 400rpx;
				width: 100%;
			}

			.masker-content-count {
				font-size: 24rpx;
				color: #ccc;
				padding: 0 10rpx;
				padding-top: 10rpx;
				text-align: right;
			}
		}
	}
</style>
